import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text ,Button,Video } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './zhibo.scss'




export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: [],
      name:'',
      navwidth:0,
      current:0
    }
  }
  config = {
    navigationBarTitleText:'往期回顾'
  }

  componentWillMount () {
  	var roomid=this.$router.params.scene;
  	this.getdate(roomid)
  	var _this=this;
  	Taro.getSystemInfo({
	  	success:function(res){
		    var windowWidth = res.windowWidth
		    var navwidth = windowWidth / 6
		    _this.setState({
		      navwidth:navwidth
		    })
	 	  }
		})
  }
  componentDidShow () {
  	
  }
  componentDidUpdate () {
  }
  
  getdate(roomid){
  	var url='/live/papi/v1.9/rooms/getreplay/'+roomid
  	var _this=this;
  	CommonJs.ajaxRequest(url,'','GET',function(res){
	 		_this.setState({
	      result:res.data.live_replay,
	      name:res.data.name
	    })
  	},'wfw')
  }
  currentHandle(index){
		
		this.setState({
	    current:index
	  })
  }
  render () {
    const livelist=this.state.result;
    return (
    	<View className='page zhibopage'>
    		
       	<View className='zhibo-his' style={livelist&&livelist.length>0?'':'display:none'}>
       		<Swiper
       		current={this.state.current}
					className="swiper-container">
	         {livelist&&livelist.map((item, index) => (
					 <SwiperItem>
					  <View className='zhibo-dl hislist'>
       			<View className='zhibo-dt'>
       					<Video
					          src={item.media_url}
					          controls={true}
					          autoplay={true}
					          initialTime='0'
					          class='video'
					          loop={false}
					          muted={false}
					          style='width:100%'
					        />
       			</View>
       			<View className='zhibo-dd'>
       				<View className='zhibo-tit'>{this.state.name}重播</View>
       				<View className='zhibo-info'>
       					{CommonJs.FormatDate(item.create_time,3)}
       				</View>
       			</View>
       		</View>
					 </SwiperItem>
	         ))}
				  </Swiper>
       		<ScrollView  style='display:none;'
              className='swiper-pagination' 
              scrollX='true'>
       				{livelist&&livelist.map((item, index) => (
          		<View className='swiper-img'>
          			<Video className='videosmall' src={item.media_url} />
          			<View className={this.state.current==index?'videosmallbg videosmallbgc':'videosmallbg'}  onClick={this.currentHandle.bind(this,index)}></View>
          		</View>
          		))}
          </ScrollView>
       	</View>
       	<View className='zhibo-list' style={livelist&&livelist.length>0?'display:none':''}>
       		<View className='nodate'>暂无数据</View>
       	</View>
      </View>
    )
  }
}
